<template>
  <div>
    <Card style="margin-bottom: 20px">
      <Form :model="problemForm" ref="problemForm" :rules="rules" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Input placeholder="问题件编码" v-model="problemForm.problemFileId" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="保单号" v-model="problemForm.contno" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="problemForm.appntName" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Select
                v-model="problemForm.sellType"
                placeholder="子渠道"
                clearable
              >
                <Option
                  v-for="item in subnameList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.value }}</Option
                >
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <DatePicker
                v-model="problemForm.sendDate"
                type="daterange"
                placeholder="推送时间段"
                :editable="false"
                style="width: 100%"
                @on-change="changeSendDate"
              ></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <Button
            type="primary"
            @click="pageSubmit(problemForm,1)"
            style="margin-right: 20px"
            :loading="queryLoading"
            >查询</Button
          >
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <Card>
      <div style="text-align: right; margin-bottom: 15px">
        <Button type="primary" shape="circle" @click="problemFileDownload">导出清单</Button>
        <Uploadv 
          action="scrm-uer/api/problem/checkProblemReplay"
          :show-upload-list='false'
          :multiple="true"
          name="file"
          :headers="headers"
          :on-success="uploadSuccess"
          :beforeUpload="beforeUpload"
          style="display:inline-block;margin-left: 10px;">
          <!-- transform: translate(0, 10px); -->
          <Button type="primary" shape="circle">清单导入</Button>
        </Uploadv>
      </div>
      <Table
        :columns="chargeColumns"
        :data="chargeData"
        @on-sort-change="sortChange"
      >
        <template slot-scope="{ row }" slot="problemFileId">
          <span @click="toDetail(row)" style="color: #2d8cf0; cursor: pointer">
            {{ row.problemFileId }}
          </span>
        </template>
        <template slot-scope="{row}" slot="customer">
          <span>
            {{row.customerServiceName + "-" + row.customerServiceId}}
          </span>
        </template>
      </Table>
      <Page
        :total="total"
        show-sizer
        show-total
        style="text-align: right; margin-top: 20px"
        @on-change="pageChange"
        @on-page-size-change="pageSizeChange"
        :page-size-opts="pageSizeOptions"
        :current="pageIndex"
        :page-size="pageSize"
        transfer
      ></Page>
    </Card>
  </div>
</template>
<script>
import axios from 'axios';
import { exportFile } from "../../../util/util";
export default {
  data() {
    return {
      headers: {
        "Authorization": sessionStorage.getItem('credentials')
      },
      problemForm: {
        problemFileId:'',
        contno:'',
        appntName:'',	//投保人姓名
        sellType:'',	//子渠道
        sendMinDate:'',	//推送日期起期
        sendMaxDate:'',
        sendDate:[],
      },
      file:null,
      subnameList: [],
      queryLoading: false,
      chargeData: [],
      pageIndex: 1,
      pageSize: 10,
      pageSizeOptions: [5, 10, 15, 20],
      total: 10,
      //表格
      chargeColumns: [
        {
          title: "问题件编号",
          key: "problemFileId",
          slot: "problemFileId",
          width: "200",
          fixed: "left",
          align: "center",
        },
        {
          title: "保单号",
          key: "contno",
          width: "200",
          align: "center",
          fixed: "left",
        },
        {
          title: "子渠道",
          key: "selltype",
          width: "160",
          align: "center",
        },
        {
          title: "投保人",
          key: "appntName",
          align: "center",
          width: "180",
        },
        {
          title: "发起人",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "paytodate",
          slot:"customer"
        },
        {
          title: "推送时间",
          key: "sendTime",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "paymoney",
        },
        {
          title: "问题",
          key: "problemDescribe",
          align: "center",
          minWidth: 180,
          tooltip: true,
        },
      ],
    };
  },
  methods: {
    // 重置表单
    handleReset() {
      this.problemForm = {
        problemFileId:'',
        contno:'',
        appntName:'',	//投保人姓名
        sellType:'',	//子渠道
        sendMinDate:'',	//推送日期起期
        sendMaxDate:'',
        sendDate:[],
      }
    },
    // 时间段
    changeSendDate(value){
      this.problemForm.sendMinDate = value[0]
      this.problemForm.sendMaxDate = value[1]
    },
    // 查询
    pageSubmit(form,index,flag) {
      let obj = {
        index:index,
        pageSize:this.pageSize,
        problemFileId:form.problemFileId,
        contno:form.contno,
        appntName:form.appntName,	//投保人姓名
        sellType:form.sellType,	//子渠道
        sendMinDate:form.sendMinDate,	//推送日期起期
        sendMaxDate:form.sendMaxDate
      }
      this.api.getProblemFileWorkList(obj).then((res) => {
        if (res.code===200) {
          if(res.data.total!=0){
            this.total = res.data.total;
            this.chargeData = res.data.records;
          }else{
            if(!flag){
              this.$Message.info('查询数据为空');
              this.chargeData = []
            }
          }
        }
      })
    },
    // 导出
    problemFileDownload(){
      let obj = {
        index:this.pageIndex,
        pageSize:this.pageSize,
        problemFileId:this.problemForm.problemFileId,
        contno:this.problemForm.contno,
        appntName:this.problemForm.appntName,	//投保人姓名
        sellType:this.problemForm.sellType,	//子渠道
        sendMinDate:this.problemForm.sendMinDate,	//推送日期起期
        sendMaxDate:this.problemForm.sendMaxDate
      }
      exportFile("scrm-gateway/scrm-uer/api/problem/problemFileDownload", obj);
    },
    beforeUpload(file){
      this.file = file
      console.log(this.file);
      return true;
    },
    // 导入文件
    uploadSuccess(res){
      this.$Message.info({
        content: res.msg,
        duration:5
      })
      let url = "api/problem/importProblemReplay"
      let formData = new FormData();  
      formData.append("file",this.file);
      axios({
        url,
        method: 'post',
        headers: {
          "Authorization": sessionStorage.getItem('credentials')
        },
        data:formData
      }).then(result=>{
        if(result.data.code == 200){
          // this.$Message.info('导入成功');
        }else{
          this.$Message.info(result.data.msg)
        }
      })
    },
    // 跳转详情
    toDetail(row) {
      sessionStorage.setItem("INSURANCE_TYPE", "问题件");
      sessionStorage.setItem("PROBLEMOBJ", JSON.stringify(this.problemForm));
      this.$router.push({
          name: "ServiceDetail",
        query: {
          selection: row,
          insuranceType: "problem",
        },
      });
    },
    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit(this.problemForm,pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit(this.problemForm,1);
    },
    changeSaleChannel(){
      $.ajax("scrm-gateway/scrm-uer/api/plan/selectsubchannel/04", {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: res => {
            if (res.code == 200 && res.data != null) {
              let obj = {}
              res.data = res.data.reduce((cur,next) => {
                obj[next.value] ? "" : obj[next.value] = true && cur.push(next);
                return cur;
              },[])
              this.subnameList = res.data
            } else {
              this.subnameList = [];
            }
          },
          error: res => {
            this.$Message.error(res.msg);
          }
        });
    },
  },
  created(){
    if (sessionStorage.getItem("INSURANCE_TYPE") == "问题件") {
      if (sessionStorage.getItem("PROBLEMOBJ")) {
        // 二次筛选条件
        this.problemForm = JSON.parse(sessionStorage.getItem("PROBLEMOBJ"))
        sessionStorage.removeItem("PROBLEMOBJ");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted(){
    this.changeSaleChannel()
    
    this.pageSubmit(this.problemForm,1,999)
  }
};
</script>